<template>

	<div>
		<common-header :tittle="tittle" :showmore="true" class="head"></common-header>
		<div class="box">

			<!--左边标题-->
			<div class="left">
				<ul class="btnList">
					<li :class="{active:num===i}" v-for="(item,i) in address" :key="item.title" v-html="item.title" @click="tab(i,item)">
					</li>
				</ul>
			</div>

			<!--右边请求的数据-->
			<div class="right">
				<van-loading v-if='showLoading' />

				<ul v-else>
					<li v-for="item in listArr" :key="item.id">
						<span>
							<img :src="item.cover_img" alt="" />
						</span>
						<div>
							<h3 v-text='item.title'></h3>
							<p v-text="item.keywords"></p>
							<router-link to="/Home/Detail">
								<em style="display: none;">查看详情</em>
							</router-link>
						</div>
					</li>
				</ul>
				<span class="nodata" v-show="nodata">--暂无数据--</span>

			</div>
		</div>

	</div>

</template>

<script type="text/javascript">
	import commonHeader from 'common/common-header-back'
	import { Loading } from 'vant';
	export default {
		data() {
			return {
				tittle: [],
				address: [],
				listArr: [],
				type: [],
				num: 0,
				showLoading: false,
				nodata: false
			};
		},
		mounted() {
			this.tittle = this.$route.params.title;
			this.type = this.$route.params.type;
			this.cartView()
			if(this.type == 1) {
				this.junkus()
			} else if(this.type == 2) {
				this.techans()
			}else if(this.type == 3) {
				this.feiyi()
			}
		},
		//获取上个页面传递的id,在下面获取数据的时候先提交id
		created() {
			this.cartView();
			this.junkus();
			this.techans();
			this.feiyi()

		},
		components: {
			commonHeader
		},
		methods: {
			tab(index, item) {
				this.showLoading = true
				this.num = index;
				if(this.type == 1) {
					this.junkus(item.id)
				} else if(this.type == 2) {
					this.techans(item.id)
				}

			},
			cartView: function() {
				// 地区
				this.$axios.get('API/v1/dizhous/selecting').then((res) => {
					if(res) {
						//						console.log('res', res)
						this.address = res.data.data.items
					} else {

					}

				})
			},

			//菌库
			junkus: function(id) {
				// 请求的数据
				this.$axios.get('API/v1/junkus', {
					params: {
						dizhou_id: id
					}
				}).then((res) => {
					if(res) {

						this.listArr = res.data.data.items
						//						console.log(res)
						this.showLoading = false

					} else {

					}

				})
			},

			//特产
			techans: function(id) {
				// 请求的数据
				this.$axios.get('API/v1/techans', {
					params: {
						dizhou_id: id,
						fileIds: 'title,keywords,cover_img'
					}
				}).then((res) => {
					if(res) {
						this.listArr = res.data.data.items
//						console.log(JSON.stringify(this.listArr))
						this.showLoading = false
						if(this.listArr == '' || this.listArr == null) {
							this.nodata = true
						}

					} else {

					}

				})
			},
			
			//非遗
			feiyi: function(id) {
				// 请求的数据
				this.$axios.get('API/v1/feiyis', {
					params: {
						dizhou_id: id,
						fields: 'id,title,keywords,cover_img'
					}
				}).then((res) => {
					if(res) {
						this.listArr = res.data.data.items
						console.log(JSON.stringify(this.listArr))
						this.showLoading = false
						if(this.listArr == '' || this.listArr == null) {
							this.nodata = true
						}

					} else {

					}

				})
			},
		}

	}
</script>
<style scoped lang="less">
	@import "~styles/index.less";
	@import "~styles/variable.less";
	html,
	body,
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
	
	.btnList li.active {
		border-left: 1px solid @base-blue-color;
		background: @base-list-black-color;
		color: @base-blue-color;
	}
	
	.van-loading {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
	}
	
	.box {
		background: #fff;
		height: calc(100% - 50px);
		overflow: hidden;
		margin: 50px 0 0px 0;
		display: flex;
		justify-content: space-between;
		.left {
			width: 75px;
			height: 100%;
			border: 1px solid @border-color;
			ul {
				width: 100%;
				height: 100%;
				overflow: hidden;
				overflow-y: scroll;
				li {
					font-size: 15px;
					padding: 10px;
					text-align: center;
					&:nth-child(1) {}
					span {
						display: block;
						text-align: center;
					}
				}
			}
		}
		.right {
			position: relative;
			overflow-y: scroll;
			width: calc(100% - 100px);
			margin: 20px 15px 0 15px;
			.nodata {
				color: #16B0B7;
				position: absolute;
				top: 20%;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}
			ul {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				li {
					font-size: 12px;
					width: 120px;
					margin-bottom: 15px;
					&:nth-child(1) {
						position: relative;
						display: block;
						width: 100%;
						justify-content: flex-start;
						display: flex;
						height: 80px;
						&>div {
							margin-left: 10px;
							width: calc(100% - 130px);
							em {
								display: block !important;
								margin-top: 10px;
								position: relative;
								&:after {
									content: '>';
									position: absolute;
									font-weight: bold;
									right: 60px;
									top: 3px;
									bottom: 0;
									margin: auto;
								}
							}
						}
						&:after {
							content: 'HOT 1';
							position: absolute;
							width: 45px;
							height: 20px;
							background: red;
							top: 0px;
							left: 0px;
							text-align: center;
							line-height: 20px;
							border-bottom-right-radius: 10px;
							border-top-right-radius: 10px;
							color: #fff;
						}
					}
					&:nth-child(2) {
						position: relative;
						&:after {
							content: 'HOT 2';
							position: absolute;
							width: 45px;
							height: 20px;
							background: red;
							top: 0px;
							left: 0px;
							text-align: center;
							line-height: 20px;
							border-bottom-right-radius: 10px;
							border-top-right-radius: 10px;
							color: #fff;
						}
					}
					&:nth-child(3) {
						position: relative;
						&:after {
							content: 'HOT 3';
							position: absolute;
							width: 45px;
							height: 20px;
							background: red;
							top: 0px;
							left: 0px;
							text-align: center;
							line-height: 20px;
							border-bottom-right-radius: 10px;
							border-top-right-radius: 10px;
							color: #fff;
						}
					}
					span {
						display: block;
						width: 120px;
						height: 80px;
						border-radius: 5px;
						img {
							width: 100%;
							height: 100%;
							border-radius: 5px;
						}
					}
					div {
						text-align: left;
						h3 {
							font-size: 15px;
							font-weight: bold;
							color: @base-black-color;
							margin-top: 10px;
						}
						p {
							font-weight: 400;
							color: rgba(153, 153, 153, 1);
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							width: 100%;
							margin-top: 10px;
						}
						em {
							display: block;
							font-weight: 400;
							color: rgba(204, 204, 204, 1);
						}
					}
				}
			}
		}
	}
</style>